<template>
    <div>
        <div class="crumbs">
            <Breadcrumb>
                <BreadcrumbItem ><Icon type="ios-notifications" /> 公告</BreadcrumbItem>
            </Breadcrumb>
        </div>
        
        <Card>
            <Row :gutter="20">
                <Col :span="3">
                    <Input v-model="params.title_like" placeholder="标题" class="handle-input mr10" @keyup.enter.native="search"></Input>
                </Col>
                <Col :span="3">
                    <Input v-model="params.content_like" placeholder="内容" class="handle-input mr10" @keyup.enter.native="search"></Input>
                </Col>
                <Col :span="3">
                    <Select v-model="params.type" placeholder="选择分类" clearable filterable @on-change="search">
                        <Option :value="1">公司公告</Option>
                        <Option :value="2">部门公告</Option>
                    </Select>
                </Col>
                <Col :span="9">
                    <Button type="primary" icon="md-search" @click="search">搜索</Button>
                    <Button type="info" icon="md-home" @click="reset">重置</Button>
                    <Button type="success" icon="md-add" @click="add">添加公告</Button>
                </Col>
            </Row>
        </Card>

        <Card style="margin-top: 20px;">
            <Table :columns="columns" :data="tableData" :loading="loading" stripe border highlight-row></Table>
        </Card>

        <Modal :title="dialogTitle" v-model="dialogShow" draggable :width="900">
            <Form ref="form" :model="form" :label-width="80" :rules="rules">
                <FormItem label="标题" prop="title">
                    <Input v-model="form.title" placeholder="碎片名称"></Input>
                </FormItem>
                <FormItem label="类型" prop="type">
                    <RadioGroup v-model="form.type" type="button">
                        <Radio :label="1">公司公告</Radio>
                        <Radio :label="2">部门公告</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="内容" prop="content">
                   <quill-editor ref="myTextEditor" :content="form.content" @change="onEditorChange($event)"></quill-editor>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="cancel">取消</Button>
                <Button type="primary" @click="save">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import { quillEditor } from 'vue-quill-editor';//默认搜索参数
    let module = 'notice';
    export default {
        components: {
            quillEditor
        },
        data() {
            return {
                url: pub.apiDomain + module,
                dialogShow: false,
                dialogTitle: '',
                form:{},    //编辑信息
                loading: true,
                tableData: [],
                params: {
                    prop: 'id',   //排序字段
                    order: 'desc',  //desc 正/反序
                    page: 1,
                    size: pub.pageSize,
                },
                columns: [
                    {title: 'id', key: 'id', width:120, sortable: true, sortType: 'desc'},
                    {title: '公告标题', key: 'title', sortable: true},
                    {title: '状态', key: 'st',sortable: true, render: (h, params) => {
                        return <i-switch type="primary" true-value={1} false-value={0} value={params.row.st}  onOn-change={value => {
                            params.row.st = value;
                            pub.stchange(this, module, params.row);
                        }}></i-switch>
                    }},
                    {title: '类型', key: 'mode',sortable: true, render: (h, params) => {
                        return params.row.type == 1 ? '公司公告' : '部门公告';
                    }},
                    {title: '内容', key: 'content', sortable: true, tooltip:true},
                    {
                        title: '操作',
                        width: 200,
                        key: 'action',
                        render: (h, params) => {
                            return <span>
                                <i-button type="primary" icon="ios-create-outline" style="margin-right:6px;" onClick={(e)=>{this.handleEdit(params.row)}}>编辑</i-button>
                                <i-button type="error" icon="md-trash" onClick={(e)=>{this.remove(params.row.id)}}>删除</i-button>
                            </span>
                        }
                    }
                ],
                //验证规则:需要在form组件加rule="rules",在input等组件上加prop="字段名"
                rules: {
                    title: [{ required: true, message: '碎片名称不能为空', trigger: 'blur' }],
                    content: [{ required: true, message: '碎片内容不能为空', trigger: 'blur' }],
                },
                uploadApi: pub.apiDomain + 'index/upload',
                headers: {'Authorization': pub.token()},
            }
        },
        mounted(){
            //接收站点变更事件
            this.bus.$on('change_site', () => {
                this.getData();
            });
        },
        created(){
            this.getData();   //由于设置了默认排序,有排序字段会自动触发sortChange操作加载列表
        },
        watch: {
            //弹窗状态变更时，重新初始化表单验证
            dialogShow: function (val) {
                this.$refs['form'].resetFields();
            },
        },
        methods: {
            //添加
            add(){
                this.dialogShow = true;
                this.dialogTitle = '添加公告';
                this.form = {type: 1, st: 1, content: '', site:pub.getCache('site')};
            },
            //加载内容：在翻页或搜索后
            getData(){
                this.$axios.post(this.url + '/ls', this.params).then(res => {
                    this.tableData = res.d;
                    this.loading = false;
                });
            },
            //编辑
            handleEdit(row) {
                this.dialogShow = true;
                this.dialogTitle = '编辑公告';
                this.form = row;
            },
            //删除
            remove(id) {
                if(!confirm('确定删除吗？')) return false;
                this.$axios.get(this.url + '/del/id/' + id).then(res => {
                    this.$Message.success('删除成功');
                    this.getData();
                });
            },
            cancel() {
                this.dialogShow = false;
                this.getData();
            },
            //搜索
            search(){
                this.getData();
            },
            //重置
            reset(){
                this.params = {page:1,size:pub.pageSize};
                this.getData();
            },
            onEditorChange(e){
                //if(this.form.content == '' && e.html != '') this.$refs.form.resetFields();
                this.form.content = e.html;
            },
            //提交表单
            save() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.$axios.post(this.url + '/save', this.form).then((res) => {
                            this.$Message.success('保存成功！');
                            this.dialogShow = false;
                            this.getData();
                        })
                    } else {
                        return false;
                    }
                });
            },
        }
    }
</script>